﻿@using System
@using Nxg.Blog.Core.Extensions
@{
    ViewBag.Title = "New Posts";
    Layout = "_Layout";
}
@section PostStyles{
    <link id="light-theme-css" href="~/lib/simplemde/simplemde.min.css" rel="stylesheet">
}
@model Nxg.Blog.Core.Commands.Posts.NewPostCommand
<div class="main">
    <div class="post-wrap archive">
        <form method="post" id="from-post" role="form" action="~/post/new">
            <input type="hidden" name="Id" value="@Model.Id"/>
            <div class="post-box">
                <input id="post-title" type="text" class="form-control" style="width:60%;" name="Title" placeholder="title" value="@Model.Title" required />
            </div>

            <div class="post-box">
                <input id="post-slug" type="text" class="form-control" style="width:60%;" name="TitleSlug" placeholder="slug" value="@Model.TitleSlug" required />
            </div>
            <div class="post-box">
                <input style="margin-bottom: 10px;" placeholder="input tag"   id="tags" class="form-control" />
                <div id="tag-hold" class="tag-hold">
                </div>
                <input type="hidden" id="hid-tag" name="Tags" value="@Model.Tags"/>
            </div>
            <div class="form-group" id="editormd">
                <input type="hidden" id="post-content-hidden" name="MarkDown" value="@System.Web.HttpUtility.UrlDecode(Model.MarkDown)"/>
                <input type="hidden" name="Content" id="post-html-content-hidden" value="@System.Web.HttpUtility.UrlDecode(Model.Content)" />
                <textarea id="post-content" data-provide="markdown" rows="30"  placeholder="start to write"></textarea>
            </div>
            <div class="post-box">
                <label for="pubdate">publishtime:</label>
                <input id="pubdate" name="PubDate" value="@((Model.PubDate != DateTime.MinValue ? Model.PubDate : DateTime.Now).ToString("yyyy-MM-dd HH:mm"))" />
            </div>
            <div class="post-box" style="margin-bottom: 10px;">
                <span>publish</span>
                <input asp-for="Published" class="switch_default" /> 
                <label for="Published" class="toggleBtn"></label>
            </div>
            <div class="post-box">
                <input id="btn-submit" type="button" value="Save" class="btn" />
                <span>@ViewBag.Tips</span>
            </div>
        </form>
    </div>
</div>

@section PostScripts{
    <script src="~/lib/simplemde/simplemde.min.js"></script>

    <script>
        var _Blog = window._Blog;
        _Blog.toggleThemeCallback = function (isDark) {
          var current = document.getElementById("light-theme-css")
          var src = "/lib/simplemde/simplemde.min.css";
          if(isDark){
              src= "/lib/simplemde/simplemde-theme-dark.min.css";
          }
          current.setAttribute("href",src);
        };
        const currentTheme = window.localStorage.getItem('theme');
        
        _Blog.toggleThemeCallback(currentTheme === 'dark');
        
        var simplemde = new SimpleMDE({ 
            element: document.getElementById("post-content") ,
            initialValue:decodeURIComponent('@Model.MarkDown')
        });

        simplemde.codemirror.on("change", function(){
            document.getElementById('post-content-hidden').value = simplemde.value();
            document.getElementById('post-html-content-hidden').value = encodeURIComponent(simplemde.markdown(simplemde.value()));
        });
    </script>

    <script>
        function deleteTag(){
            var tags = document.getElementById('hid-tag').value.split(',');
            var idx = tags.indexOf(this.innerText.replace("#",""));
            console.log('delete',this,idx)
            tags.splice(idx,1);
            document.getElementById('hid-tag').value = tags.join(',')
            var ul =document.getElementById("tag-hold");
            ul.removeChild(this);
        }

        function appendTag(tag){
            var ul =document.getElementById("tag-hold");
            var li = document.createElement("span");
            li.innerText =  "#" + tag;
            ul.appendChild(li);
            li.addEventListener("click",deleteTag);
        }
        
        function addTag(){
            var tag = event.target.value.replace(new RegExp(',','g'),"");
            if(event.keyCode!==13 || !tag){
                return;
            }
            var tags = document.getElementById('hid-tag').value.split(',');
            if(tags.indexOf(tag)!==-1){
                return;
            }
            appendTag(tag);
            tags.push(tag);
            document.getElementById('hid-tag').value = tags.join(',')
            event.target.value="";
        }

        document.ready(function () {
            document.getElementById("post-title").addEventListener("change", function () {
                var title = this.value;
                window._Blog.post("/post/slug",{title}).then(function(result){
                    if(!result.success) return;
                    document.getElementById("post-slug").value = result.data;
                });
            });

            document.getElementById("btn-submit").addEventListener("click",function(){
                document.getElementById("from-post").submit();
            })

            document.getElementById('tags').addEventListener("keypress",addTag);

            var initTags = document.getElementById('hid-tag').value.split(',');
            for(var i=0;i<initTags.length;i++){
             appendTag(initTags[i])
            }
        }) 
        
    </script>
}